<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>添加月份</title>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link href="css/style.css" rel="stylesheet">
</head>

<body>
    <div id="month-container" class="container">
        <div class="panel panel-default">
            <div class="panel-heading">金额控制</div>
            <div class="panel-body">
                <div class="sec1 row">
                    <div class="col-sm-6">
                        <input v-model="je" type="text" class="form-control" placeholder="Text input">
                    </div>
                    <div class="col-sm-6">
                        <button class="btn btn-default" v-on:click="setMoney">加入</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="divider">
            <hr>
        </div>
        <div class="row mt-20">
            <div class="col-md-6">
                <div class="panel panel-default">
                    <div class="panel-heading">选择年月提交</div>
                    <div class="panel-body row">
                        <div class="form-option col-md-6">
                            <label for="year">年：</label>
                            <select v-model="selected.year" class="form-control mt-10" name="year" id="">
                                <option v-bind:value="year" v-for="year in years">{{ year }}</option>
                            </select>
                        </div>
                        <div class="form-option col-md-6">
                            <label for="month">月：</label>
                            <select v-model="selected.month" class="form-control mt-10" name="month" id="">
                                <option v-model="year" v-for="month in months">{{ month }}</option>
                            </select>
                        </div>
                        <div class="form-btn">
                            <button class="btn btn-default mt-10" v-on:click="addMonth">提交</button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="panel panel-default">
                    <div class="panel-heading">已添加年月</div>
                    <div class="panel-body">
                        <table class="table table-bordered mt-10">
                            <tr>
                                <th>年</th>
                                <th>月</th>
                                <th>操作</th>
                            </tr>
                            <tr v-for="date in dates">
                                <td>{{date.helpYear}}</td>
                                <td>{{date.helpMonth}}</td>
                                <td>
                                    <button class="btn btn-default" v-on:click="delete($event,date.id)">删除</button>
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
<script type="text/javascript" src="js/dist/jquery-2.2.4.js"></script>
<script type="text/javascript" src="js/dist/bootstrap.min.js"></script>
<script type="text/javascript" src="js/dist/vue.js"></script>
<script type="text/javascript" src="js/month.js"></script>

</html>
